<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://127.0.0.1:11209/download/css/element-ui.css" rel="stylesheet">
    <link href="http://127.0.0.1:11209/download/css/common.css" rel="stylesheet">

</head>
<body>
<div id="app">
    <div id="msg" style="color: red" align="center"></div>
    <el-container>
        <el-main>
            <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入内容需要转换的内容,一行一条记录"
                    v-model="target">
            </el-input>
            <el-input
                    type="textarea"
                    placeholder="转换结果"
                    v-model="result"
                    :autosize="true"
            >
            </el-input>
        </el-main>
       <el-footer>
           <el-button @click="format">逗号隔开</el-button>
           <el-button @click="formatWith">逗号隔开-带单引号</el-button>
       </el-footer>
    </el-container>
</div>
</body>
<script src="http://127.0.0.1:11209/download/js/vue-2.5.16.js"></script>
<script src="http://127.0.0.1:11209/download/js/elementUi.js"></script>
<script type="text/javascript">
    try {
        var app = new Vue({
            el: "#app",
            data: function() {
                return {
                    result: '',
                    target: ''
                }
            },
            methods: {
                format: function () {

                    var that = this;
                    var resultAry = [];
                    var ary = that.target.split("\n");
                    for (var i = 0; i < ary.length ; i++) {
                        resultAry.push(ary[i]+",");
                    }

                    that.result = resultAry.join("\n");
                },
                formatWith: function () {
                    var that = this;
                    var resultAry = [];
                    var ary = that.target.split("\n");
                    for (var i = 0; i < ary.length ; i++) {
                        resultAry.push("\'"+ary[i]+"\'"+",");
                    }

                    that.result = resultAry.join("\n");
                }
            },
            created: function () {

            }
        });
    }catch(error) {
        document.getElementById("msg").innerHTML = error.message
    }

</script>
</html>